<!--
 * @Author: 徐伟杰
 * @Date: 2022-09-20 16:07:35
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 10:10:40
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="peopleInfo">
    <action-bar :options="navOptions" />
    <uni-section title="基本信息" type="line">
      <view v-for="(item, index) in list" :key="index">
        <template>
          <view v-if="item.type == 'input' && item.show" class="formItem">
            <span class="required">{{ item.label }}:</span>
            <input type="text" class="input_rewrite" disabled v-model="form[item.name]" placeholder="暂无数据" />
          </view>
          <view v-else-if="item.type == 'selected' && item.show" class="formItem">
            <span :class="item.label == '注册消防工程师' ||
              item.label == '消防设施操作人员' ? '' : 'required'" style="width: 300rpx">{{ item.label }}:</span>
            <picker mode="selector" class="input_rewrite" disabled :range="item.label == '证件类型' ? typeID :
              item.label == '注册消防工程师' ? regiType :
                item.label == '消防设施操作人员' ? faciType :
                  item.label == '是否技术负责人' ? isReType : qualiType" range-key="label">
              <input type="text" disabled :value="form[item.name]" placeholder="暂无数据" />
            </picker>
          </view>
          <view v-else-if="item.type == 'image' && item.show" class="formItem_double">
            <span class="required">{{ item.label }}:</span>
            <view class="images">
              <view v-for="(list, index) in changeImageFormat(form[item.name])" :key="index">
                <view style="border: 1rpx solid #e1e1e1; width: 300rpx; height: 300rpx">
                  <img v-if="form[item.name]" style="width: 100%; height: 100%" :src="list" @click="ViewImage(list)"
                    alt="">
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
      <view style="height: 80rpx;"></view>
    </uni-section>
    <view class="allBtn">
      <view class="btn" @click="submit">
        返回
      </view>
    </view>
  </view>
</template>

<script>
import { baseApiUrl, baseImgUrl } from '@/config.js';
import uploadImg from '@/components/upload/upload-img.vue';
import { identityCardList, engineerLevelList, operatorLevelList } from '@/utils/dictList.js';
export default {
  components: { uploadImg },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      baseApiUrl: baseApiUrl,
      staffId: null, // 查询详情时的id
      form: {
        portraitCollection: null, // 人像采集
        firecontrolQualificationCertificate: null, // 注册消防工程师注册证书
        countryCertificate: null, // 消防设施操作员国家职业资格证书
      }, // 详情数据
      navOptions: { // 导航栏配置参数
        left: {
          icon: 'back'
        },
        center: {
          title: '人员基本信息'
        }
      },
      typeList: [], // 下拉框选项
      // 身份证类型
      typeID: identityCardList,
      // 注册消防工程师
      regiType: engineerLevelList,
      // 消防设施操作人员
      faciType: operatorLevelList,
      // 是否技术负责人
      isReType: [
        {
          label: '是',
          value: '是'
        },
        {
          label: '否',
          value: '否'
        },
      ],
      // 是否获取消防设施操作员国家职业资格证书
      qualiType: [
        {
          label: '已获得',
          value: '1'
        },
        {
          label: '考试已通过，暂未获取职业资格证书',
          value: '2'
        },
      ],

      list: [
        { label: '姓名', name: 'name', type: 'input', show: true },
        { label: '证件类型', name: 'type', type: 'selected', show: true },
        { label: '证件号码', name: 'idCard', type: 'input', show: true },
        { label: '联系电话', name: 'phone', type: 'input', show: true },
        { label: '注册消防工程师', name: 'registeredFireEngineer', type: 'selected', show: true },
        { label: '消防设施操作人员', name: 'facilityOperators', type: 'selected', show: true },
        { label: '是否技术负责人', name: 'isResponsible', type: 'selected', show: false },
        { label: '注册消防工程师注册号', name: 'manageNo', type: 'input', show: false },
        { label: '注册消防工程师注册证书签发单位', name: 'signArea', type: 'input', show: false },
        { label: '是否获取消防设施操作员国家职业资格证书', name: 'qualificationCertificate', type: 'selected', show: false },
        { label: '消防设施操作员国家职业资格证书号', name: 'facilityOperatorsNo', type: 'input', show: false },
        { label: '消防设施操作员国家职业资格证书理论得分', name: 'theoreticalScore', type: 'input', show: false },
        { label: '消防设施操作员国家职业资格证书操作得分', name: 'score', type: 'input', show: false },
        { label: '人像采集', name: 'portraitCollection', type: 'image', show: true },
        { label: '身份证人像面', name: 'positivePhoto', type: 'image', show: true },
        { label: '身份证国徽面', name: 'backPhoto', type: 'image', show: true },
        { label: '注册消防工程师注册证书', name: 'firecontrolQualificationCertificate', type: 'image', show: false },
        { label: '消防设施操作员国家职业资格证书', name: 'countryCertificate', type: 'image', show: false },
      ],
      loading: false,
    }
  },
  computed: {
    conversion() {
      if (this.form.portraitCollection) return this.baseApiUrl + this.form.portraitCollection
    },
  },
  onLoad(options) {
    if (options.id) {
      this.staffId = options.id
      this.getForm()
    }
  },
  onShow() {
    if (this.$store.state.unitTask.portraitCollection) {
      this.form.portraitCollection = this.$store.state.unitTask.portraitCollection
    }
    if (this.$store.state.login.form.portrait) {
      this.form.positivePhoto = this.$store.state.login.form.portrait
    }
    if (this.$store.state.login.form.emblem) {
      this.form.backPhoto = this.$store.state.login.form.emblem
    }
  },
  methods: {
    // 获取表单信息
    getForm() {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      this.$store.dispatch('peopleManage_form', this.staffId).then(res => {
        if (res && res.code === 200) {
          this.form = res.data
          // 回显证件类型
          this.typeID.forEach(item => {
            if (item.value == res.data.type) {
              this.form.type = item.label
            }
          })
          if (res.data.registeredFireEngineer == '1') {
            this.list[6].show = true
            this.list[7].show = true
            this.list[8].show = true
            this.list[16].show = true
          } else if (res.data.registeredFireEngineer == '2') {
            this.list[6].show = false
            this.list[7].show = true
            this.list[8].show = true
            this.list[16].show = true
          }
          if (res.data.facilityOperators != null) {
            this.list[9].show = true
            this.list[17].show = true
          }
          if (res.data.qualificationCertificate == '1') {
            this.list[10].show = true
            this.list[17].show = true
          } else if (res.data.qualificationCertificate == '2') {
            this.list[11].show = true
            this.list[12].show = true
            this.list[17].show = false
          }

          // 回显注册消防工程师
          this.regiType.forEach(item => {
            if (item.value == res.data.registeredFireEngineer) {
              this.form.registeredFireEngineer = item.label
            }
          })
          // 回显消防设施操作人员
          this.faciType.forEach(item => {
            if (item.value == res.data.facilityOperators) {
              this.form.facilityOperators = item.label
            }
          })
          // 回显是否获取消防设施操作员国家职业资格证书
          this.qualiType.forEach(item => {
            if (item.value == res.data.qualificationCertificate) {
              this.form.qualificationCertificate = item.label
            }
          })
          // 处理证书数据
          if (this.form.firecontrolQualificationCertificate) {
            this.form.firecontrolQualificationCertificate = res.data.firecontrolQualificationCertificate
          }
          if (this.form.countryCertificate) {
            this.form.countryCertificate = res.data.countryCertificate
          }
        }
      })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 对预览图片路径进行处理
    getImgUrl(url) {
      if (url) {
        if (url.indexOf('http') < 0) {
          url = this.$baseApiUrl + url;
        }
        url = url.replace(/\\/g, '/');
        return encodeURI(url);
      } else {
        return url;
      }
    },
    // 预览图片
    ViewImage(url) {
      if (url) {
        var path = url.split(',');
        path = path.map(item => {
          return this.getImgUrl(item);
        });
        uni.previewImage({
          urls: path,
          current: 0
        });
      }
    },
    submit() {
      uni.navigateBack({
        delta: 1
      })
    },
    changeImageFormat(url) {
      if (url) {
        let data = url.split(',')
        return data.map(item => {
          return this.baseApiUrl + item
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

::v-deep .uni-section {
  margin-top: 0;
  background-color: transparent;
}

.peopleInfo {
  width: 100%;
  height: 100%;
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

  .formItem,
  .formItem_double {
    width: calc(100% - 40rpx);
    margin: 0 auto 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    min-height: 110rpx;
    display: flex;
    padding: 24rpx;

    .required {
      width: 300rpx;

      &::before {
        content: "*";
        margin: 0 10rpx;
        color: #ea0707;
      }
    }
  }

  .formItem {
    align-items: center;

    .input_rewrite {
      text-align: right;
      width: calc(100% - 300rpx);
    }

    &>view:not(:last-child) {
      margin-bottom: 20rpx;
    }
  }

  .formItem_double {
    flex-direction: column;
    justify-content: flex-start;

    .required {
      width: 100%;
    }

    .images {
      margin-top: 10rpx;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }

  .allBtn {
    width: 100%;
    height: 80rpx;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    z-index: 2;
    border-top: 1rpx solid #f5f5f5;

    .btn {
      width: calc(100% - 40rpx);
      margin: 7rpx auto;
      height: 66rpx;
      line-height: 66rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      border-radius: 40rpx;
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
    }
  }
}
</style>